<template>
    <div>
        <span v-if="shopName">{{ shopName }}</span>
        <el-button type="primary" @click="handleAssignShop" v-else>分配店铺</el-button>

        <el-dialog
            v-model="dialogVisible"
            title="分配店铺"
            width="30%"
            append-to-body
        >
            <el-select v-model="selectedShopId" placeholder="请选择店铺" style="width: 100%">
                <el-option
                    v-for="item in shopList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmAssignShop">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useStaffStore } from '@/stores/useStaffStore'
import request from '@/api'

const props = defineProps<{
    shopName?: string
    memberId: number | string
    type?: 'member' | 'order' | 'contract'
}>()

const emit = defineEmits<{
    (e: 'update:shopName', value: string): void
}>()

const staffStore = useStaffStore()
const dialogVisible = ref(false)
const selectedShopId = ref<number>()

// 获取店铺列表
const shopList = computed(() => {
    return staffStore.shopList.map((shop: { id: number; shop_name: string }) => ({
        value: shop.id,
        label: shop.shop_name
    }))
})

// 处理分配店铺
const handleAssignShop = () => {
    selectedShopId.value = undefined
    dialogVisible.value = true
}

// 确认分配店铺
const confirmAssignShop = async () => {
    if (!selectedShopId.value) {
        ElMessage.warning('请选择店铺')
        return
    }
    try {
        let url = ''
        let params: any = {}
        if (props.type === 'order') {
            url = '/api/order/assignShop'
            params = { orderId: props.memberId, shopId: selectedShopId.value }
        } else if (props.type === 'contract') {
            url = '/api/contract/assignShop'
            params = { contractId: props.memberId, shopId: selectedShopId.value }
        } else {
            url = '/api/member/assignShop'
            params = { memberId: props.memberId, shopId: selectedShopId.value }
        }
        const resp = await request({
            url,
            method: 'put',
            params
        })
        if (resp.status === 200) {
            ElMessage.success('分配店铺成功')
            // 更新店铺信息
            const shop = shopList.value.find((s: { value: number; label: string }) => s.value === selectedShopId.value)
            if (shop) {
                emit('update:shopName', shop.label)
            }
            dialogVisible.value = false
        }
    } catch (error) {
        console.error('分配店铺失败:', error)
        ElMessage.error('分配店铺失败')
    }
}

onMounted(() => {
    if (staffStore.shopList.length === 0) {
        staffStore.fetchShopList()
    }
})
</script> 